/**
 * 权限指令
 * 用于控制元素是否显示基于用户角色
 */

import { getCurrentUserRole } from '@/utils/permission'

/**
 * 权限指令
 * 用法: v-permission="'admin'" 或 v-permission="['admin', 'user']"
 */
export default {
  mounted(el, binding) {
    const { value } = binding
    const userRole = getCurrentUserRole()

    if (value && userRole) {
      let hasPermission = false

      if (typeof value === 'string') {
        // 单个角色
        hasPermission = userRole === value
      } else if (Array.isArray(value)) {
        // 多个角色
        hasPermission = value.includes(userRole)
      }

      // 如果没有权限，隐藏元素
      if (!hasPermission) {
        el.style.display = 'none'
      }
    } else {
      // 如果没有提供角色或用户未登录，隐藏元素
      el.style.display = 'none'
    }
  },

  updated(el, binding) {
    // 更新时重新检查权限
    this.mounted(el, binding)
  }
}
